<template>
  <div>
    <div class="box" @scroll="onScroll">
      <div class="box1">
        <div class="content" v-for="item in list" :key="item">
          <img :src="item.productImage" />
          <p>{{ item.productName }}</p>
          <p>￥{{ item.salePrice }}</p>
        </div>
      </div>
      <div class="loading" v-show="loading">
        <img
          src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3544053956,2144358865&fm=26&gp=0.jpg"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      list: [],
    };
  },
  mounted(){
         this.$axios.get("/data.json").then((res) => {
          this.list = res.data.result.list;
        });
  },
  methods: {
    onScroll(event) {
      //获取可视区域的高度
      var clientHeight = event.target.clientHeight;
      // 获取滚动视图的高度
      var scrollHeight = event.target.scrollHeight;
      //获取滚动视图的滚动距离
      var scrollToTop = event.target.scrollTop;
      if (scrollHeight - scrollToTop - clientHeight <= 0) {
        this.loading = true;
        setTimeout(() => {
          this.$axios.get("/data2.json").then((res) => {
           res.data.result.list.forEach(item=> {
            this.list.push(item);
           });
          });
          this.loading = false;
        },3000);
      }
    },
  },
};
</script>
<style  scoped>
.box {
  width: 1500px;
  height: 90vh;
  border: 1px solid red;
  margin: 0 auto;
  overflow: scroll;
}
.box1 {
  width: 100%;
  height: 100vh;
}
.content {
  width: 300px;
  height: 300px;
  float: left;
  margin-top: 36px;
  margin-left: 60px;
  background: orange;
}
.content img {
  width: 200px;
  margin-top: 30px;
  float: left;
  margin-left: 50px;
}
.loading {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.loading img {
  width: 100%;
  height: 100%;
}
p {
  float: left;
  margin-left: 50px;
}
</style>